<template>
    <div class="article-container">
        <pageTitle :title="'文章编辑'" />

        <!-- 富文本编辑器容器 -->
        <div class="editor-container">
            <el-text-editor v-model="articleContent" height="calc(100vh - 180px)" :toolbar="[
                'heading', 'bold', 'italic', 'underline', 'strike',
                '|', 'color', 'background', 'align', 'lineHeight',
                '|', 'bulletedList', 'numberedList', 'todoList',
                '|', 'link', 'image', 'table', 'blockQuote',
                '|', 'undo', 'redo', 'fullscreen'
            ]" placeholder="请输入文章内容..." />
        </div>

        <!-- 底部操作按钮 -->
        <div class="editor-footer">
            <el-button type="primary" size="large" @click="saveArticle">
                <el-icon>
                    <Check />
                </el-icon>
                <span>保存</span>
            </el-button>
            <el-button size="large" @click="clearEditor">
                <el-icon>
                    <Delete />
                </el-icon>
                <span>清空</span>
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Check, Delete } from '@element-plus/icons-vue'
import pageTitle from "@/components/pageTitle/pageTitle.vue"

// 文章内容
const articleContent = ref('')

// // 保存文章
// const saveArticle = () => {
//     console.log('保存文章内容:', articleContent.value)
//     ElMessage.success('文章保存成功')
// }

// // 清空编辑器
// const clearEditor = () => {
//     articleContent.value = ''
//     ElMessage.info('已清空编辑器')
// }
</script>

<style scoped lang="less">
.article-container {
    padding: 20px;
    background-color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;

    .editor-container {
        margin-top: 20px;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        overflow: hidden;

        :deep(.el-text-editor) {
            border: none;

            .tox-tinymce {
                border-radius: 4px;
            }
        }
    }

    .editor-footer {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        gap: 20px;

        .el-button {
            width: 120px;
        }
    }
}
</style>